<template>
<el-aside class="side">
    <el-menu
      style="height: 100%"
      :unique-opened="true"
      router
    >
      <div v-for="item in props.aside" :key="item.id">
        <el-sub-menu v-if="item.itemChildren" :index="item.router">
          <template #title>
            <i v-if="item.icon" :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="items in item.itemChildren"
            :key="items.id"
            :index="items.itemRouter"
          >
            <template #title>
              <i v-if="item.icon" :class="items.icon"></i>
              <span>{{ items.itemName }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item
            v-else
            :key="item.id"
            :index="item.router"
          >
            <template #title>
              <i v-if="item.icon" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
          </el-menu-item>
      </div>
    </el-menu>
  </el-aside>
</template>

<script lang="ts" setup name="BaseAside">
export interface asideItemType {
  id: number,
  itemName: string,
  icon?: string,
  itemRouter: string
}

export interface asideType {
  id: number;
  name: string;
  icon?: string;
  router: string;
  itemChildren?: asideItemType[]
}

let props = withDefaults(defineProps<{
  aside: asideType[],
}>(), {
  // 复杂数据类型设置默认值使用函数的方式
  aside: () => ([{
    id: 1,
    name: '首页',
    router: 'admin-home',
    itemChildren: [{
      id: 1,
      itemName: '用户管理',
      itemRouter: 'admin-userManage'
    }]
  }])
})
</script>

<style lang="less" scoped></style>